<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="title">钱包</view>
			<view class="nav_list flex_between">
				<view class="nav_item" v-for="item in navList" @tap="navChange(item)">
					<view class="nav_icon flex_center">
						<uni-icons custom-prefix="iconfont" :type="item.icon" size="27"
							style="font-weight: bold;"></uni-icons>
					</view>
					<view class="nav_title font_title">{{item.title}}</view>
				</view>
			</view>
			<view class="sort">
				<view class="sort_header flex_between">
					<view class="sort_title">交易记录</view>
					<uni-icons type="forward" size="21" color="#0065ff" @tap="pagePath('transaction')"></uni-icons>
				</view>
				<view class="sort_list">
					<view class="sort_item flex_between" v-for="item in stockOrderList.slice(0,10)">
						<statusView type="3"></statusView>
						<view class="item_detail">
							<view class="item_title">{{item.pro_name}}</view>
							<view class="item_tips">{{item.order_sn}}</view>
						</view>
						<view class="item_number">
							<view class="item_amount" :class="1==1?'up':'down'">{{item.money}}</view>
							<view class="item_tips">{{item.createtime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sort">
				<view class="sort_header flex_between">
					<view class="sort_title">充值提现记录</view>
					<uni-icons type="forward" size="21" color="#0065ff" @tap="pagePath('deposit')"></uni-icons>
				</view>
				<view class="sort_list">
					<view class="sort_item flex_between" v-for="item in rechargeList.slice(0,10)">
						<statusView type="6"></statusView>
						<view class="item_detail">
							<view class="item_title">{{item.money}}</view>
							<view class="item_tips">{{item.time_str}}</view>
						</view>
						<!-- <statusView :type="getStatusIconType(item.status)"></statusView> -->
						<text>{{item.status_str}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import statusView from "./components/status.vue"
	import {
		rechargeListApi,
		stockOrderListApi
	} from '@/api/api.js'
	export default {
		components: {
			headerView,
			statusView
		},
		data() {
			return {
				stockOrderList: [],
				rechargeList: [],
				navList: [{
					path: "/pages/user/Deposit/Deposit",
					title: "充值",
					icon: "icon-xiazai"
				}, {
					path: "/pages/user/withdraw/withdraw",
					title: "提现",
					icon: "icon-shangchuan"
				}, {
					path: "/pages/user/wallet/crypto",
					title: "加密钱包",
					icon: "icon-qianbao"
				}, {
					path: "/pages/user/wallet/bank",
					title: "银行卡",
					icon: "icon-yinhangka"
				}]
			}
		},
		onLoad() {
			this.getRechargeList()
			this.getStockOrder()
		},
		methods: {
			// 获取订单记录列表
			getStockOrder() {
				const token = uni.getStorageSync('token')
				const status = '2'
				stockOrderListApi({
					token,
					status
				}).then(res => {
					this.stockOrderList = res.data.data.data
				})
			},
			getStatusIconType(status) {
				// 根据不同的 status 返回对应的图标类型
				if (status === 1) {
					return 8; // 8 对应审核中的图标类型
				} else if (status === 0) {
					return 9; // 9 对应成功的图标类型
				} else {
					return 10; // 其他状态对应失败的图标类型
				}
			},
			// 获取充值记录列表
			getRechargeList() {
				const token = uni.getStorageSync('token')
				const status = '-1'
				rechargeListApi({
					token,
					status
				}).then(res => {
					this.rechargeList = res.data.data.data
				})
			},
			navChange(opt) {
				uni.navigateTo({
					url: opt.path
				})
			},
			pagePath(key) {
				let type = "0"
				switch (key) {
					case "transaction":
						type = "1"
						break;
					case "deposit":
						type = "2"
						break;
				}
				uni.navigateTo({
					url: "/pages/user/wallet/list?type=" + type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 40rpx;

		.title {
			padding-top: 60rpx;
			font-size: 30px;
			font-weight: 500;
			font-family: PM;
			line-height: 92rpx;
		}

		.nav_list {
			column-gap: 40rpx;
			margin-top: 80rpx;

			.nav_item {
				flex: 1;
				text-align: center;

				.nav_icon {
					width: 100%;
					height: 130rpx;
					border-radius: 40rpx;
					background-color: hsla(0, 0%, 92.9%, .46);
					font-size: 32rpx;
				}

				.nav_title {
					margin-top: 12rpx;
				}
			}
		}

		.sort {
			margin-top: 50rpx;

			.sort_header {
				font-size: 36rpx;
			}

			.sort_list {
				margin-top: 30rpx;

				.sort_item {
					column-gap: 30rpx;
					margin-bottom: 30rpx;

					.item_tips {
						font-size: 24rpx;
						opacity: .4;
						font-family: PM;
						line-height: 34rpx;
					}

					.item_detail {
						flex: 1;

						.item_title {
							font-size: 36rpx;
							line-height: 54rpx;
							font-family: PM;
						}
					}

					.item_amount {
						text-align: end;
						font-family: PM;
						font-size: 36rpx;
						line-height: 54rpx;
					}
				}
			}
		}
	}
</style>